<template>
  <div class="kqjl">
    <van-sticky>
      <Header title="考勤记录"/>
    </van-sticky>
    <div class="kqjl-content">
      <nut-collapse icon="down-arrow" v-model:active="activeName" :accordion="true">
        <nut-collapse-item v-for="(item, index) in kqjlList" :title="item.courseName" :name="index" >
          <div v-if="item.kqData !== null && item.dates !== null">
            <div v-for="(itemData, index2) in item.kqData" :key="index2">
              <div v-for="(itemDate, index3) in item.dates" :key="index3">
                <div class="time" v-if="index2 === index3">
                  <div :class="getIconClass(itemData)"></div>
                  <p class="flex" style="opacity: 1;padding: 0;">
                    <span class="flex__item">{{ itemDate }}</span>
                  </p>
                </div>
              </div>
            </div>
          </div>
          <div v-else >
            无考勤记录
          </div>
        </nut-collapse-item>
      </nut-collapse>
    </div>
  </div>
</template>

<script setup>
import Header from '../../components/Header/Header.vue'
import {getKqjlData} from "/@/api/kqjl";

// const activeNames = reactive([]);
const activeName = ref(-1);
let kqjlList = ref([]);

async function initData() {
  await getKqjlData().then((res) => {
    kqjlList.value = res.response.value.extend.kqData.map((item) => {
      return {
        "kqData": item.kqData,
        "courseName": item.courseName,
        "dates": item.dates
      }
    });
  }).catch((err) => {
    // console.log(err);
  });

  // console.log('kqjlList', kqjlList.value);
}

function getIconClass(param) {
  if (100 === param) {
    return 'kqjl_icon kqjl_icon_cq';
  } else if (1 === param) {
    return 'kqjl_icon kqjl_icon_qj';
  } else if (2 === param) {
    return 'kqjl_icon kqjl_icon_kd';
  }
}

onMounted(() => {
  initData();
})

</script>

<style scoped lang="less">
.kqjl {
  .kqjl-content {
    margin: 5px 15px;

    .time {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      height: 80px;
      border-bottom: 1px solid #c2c2c2;

      .kqjl_icon {
        width: 50px;
        height: 50px;
        background-size: 100%;
        color: #000;
      }

      .kqjl_icon_cq {
        background-image: url(/src/image/kqjl_icon_cq.png);
      }

      .kqjl_icon_kd {
        background-image: url(/src/image/kqjl_icon_kd.png);
      }

      .kqjl_icon_qj {
        background-image: url(/src/image/kqjl_icon_qj.png);
      }

      .flex {
        .flex__item {
          text-align: right;
          color: #c2c2c2;
          font-size: 1rem;
        }
      }
    }
  }
}

/deep/ .nut-collapse-item .collapse-item {
  border-radius: 20px;
  margin-top: 20px;
  //height: 150px;
  //padding: 6vw 9.6vw 3.466667vw 6.933333vw;
  padding: 6vw;
}

/deep/ .nut-collapse-item .collapse-icon-title {
  font-size: 1.05rem;
  //font-weight: 350;
  color: #141414;
  //text-align: center;
}

/deep/ .nut-collapse-item .collapse-wrapper .collapse-content, .nut-collapse-item .collapse-wrapper .collapse-extraRender, .nut-collapse-item .collapse-extraWrapper .collapse-content, .nut-collapse-item .collapse-extraWrapper .collapse-extraRender {
  padding: 10px 50px;
}

///deep/ .empty{
//  height: 8vw;
//}
</style>
